<template>
    <h3>watch(a,(new,old,onInvalidate)=>{}) 第三个参数onInvalidate可以设置过期的副作用函数，在第二次执行时会调用上一次onInvalidate注册的回调。</h3>
    <el-button @click="handleClick">counter++</el-button>
</template>

<script setup>
import { ref, watch, } from "vue"

const counter = ref(0)
watch(counter, (newVal, oldVal, onInvalidate) => {
    let expired = false
    onInvalidate(() => {
        expired = true
    })
    setTimeout(() => {
        // 如果在1秒内counter的值发生变化，onInvalidate回调函数会被执行,expired标记为true表示过期
        console.log(expired);
    }, 1000)


    console.log(import.meta.env);
})

const handleClick = () => {
    counter.value++
}
</script>

<style lang="scss" scoped>
</style>